<script lang="ts">
	import SvelteLogo from 'virtual:icons/logos/svelte-icon'
	import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
	import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
	import IconParkAbnormal from 'virtual:icons/icon-park/abnormal'
	import RawMdiAlarmOff from 'virtual:icons/mdi/alarm-off?raw&width=4.25em&height=4.25em'
	import RawMdiAlarmOff2 from 'virtual:icons/mdi/alarm-off?raw&width=1em&height=1em'
	import Greet from '$lib/Greet.svelte'

	import { onMount } from 'svelte'

	import {  klineResultStore, klineTableConfStore } from '$lib/FudaStore'
	// 使用 $: 响应式声明来更新 sliderState
	$: klineResultState = $klineResultStore
	$: klineTableConfState = $klineTableConfStore

	let count = 0
	onMount(() => {
		const interval = setInterval(() => count++, 1000)
		return () => clearInterval(interval)
	})
</script>

<main class="border border-solid border-green-400 h-full">
	<h1>Svelte Template1</h1>
	<p>Edit <code>src/App.svelte</code> to trigger HMR</p>
	<p>Counter: <code>{count}</code></p>

	<div class="w-full">
		klineTableConfState.klineFlatTable?.columns?.length={klineTableConfState.klineTableConf?.columns
			?.length || 0}
	</div>

	<h1 class="text-5xl font-bold underline">Welcome to SvelteKit</h1>
	<Greet />
	<p>lslslslls</p>

	<SvelteLogo style="font-size:2em" />
	<br />
	<br />
	<MdiStore24Hour />
	<MdiAlarmOff />
	<IconParkAbnormal />
	{@html RawMdiAlarmOff}
	{@html RawMdiAlarmOff2}
	<p>lslslslls</p>
</main>
